<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="18">
        <el-card shadow="hover" style="margin-top: 15px;">
          <div ref="chart" style="width:100%;height:320px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.getEchartData()
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          title: [
            { text: '收费总报表预览' },
            { text: '自来水', x: '25%' },
            { text: '用电', x: '45%' },
            { text: '燃气', x: '65%' },
            { text: '●', x: '23%',textStyle:{color: '#ff0000'}},
            { text: '●', x: '43%',textStyle:{color: '#5e00ff'}},
            { text: '●', x: '63%',textStyle:{color: '#39b54a'}},
          ],
          grid: {
            x: 50, // 左间距
          },
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '水',
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#ff0000',
                    width: 5,
                  }
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230]
            },
            {
              name: '电',
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#5e00ff',
                    width: 5,
                  }
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330]
            },
            {
              name: '气',
              type: 'line',
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: '#39b54a',
                    width: 5,
                  }
                }
              },
              data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330]
            },
          ]
        }
        myChart.setOption(option)
      }
    },
  },
  watch: {},
  created() {
  }
}
</script>

<style scoped></style>

